﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Stat.aspx.cs" Inherits="DBWTProject.route.Stat" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);

        function drawChart() {
            //shared values
            var width = 400;
            var height = 200;

            //Total Distance
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForMonthCompare("Distance") %>);
            var options = {vAxis: { title: 'Duration (h)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('distance_div'));
            chart.draw(data, options);

            //Total duration
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForMonthCompare("Duration") %>);
            var options = {vAxis: { title: 'Duration (h)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('duration_div'));
            chart.draw(data, options);

            //Elevation covered
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForMonthCompare("Elevation") %>);
            var options = {vAxis: { title: 'Elevation (m)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('elevation_div'));
            chart.draw(data, options);

            //Mean speed
            var data = google.visualization.arrayToDataTable(<%=GetDataTableForMonthCompare("MeanSpeed") %>);
            var options = {vAxis: { title: 'MeanSpeed (km/h)', viewWindow: {min:0} }, width: width, height: height, legend: 'bottom'};
            var chart = new google.visualization.ColumnChart(document.getElementById('speed_div'));
            chart.draw(data, options);
        }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h1>
        Statistics for <%= Year%>
    </h1>
    <p>
        <asp:DataList ID="dlYear" runat="server" ShowFooter="False" 
            ShowHeader="False" RepeatDirection="Horizontal">
            <HeaderTemplate>
                <td>Year</td>
            </HeaderTemplate>
             <ItemTemplate>
                <asp:HyperLink Text='<%# DataBinder.Eval(Container.DataItem, "Item1") %>' ID="yearDetail" runat="server" ToolTip="Show " NavigateUrl='<%# Eval("Item1", "/route/Stat.aspx?y={0}") %>'/>
             </ItemTemplate>
        </asp:DataList>
    </p>

        <%=OutputHTML() %>

        <br />

        <h3>Comparision of months</h3>
        <table>
            <tr>
                <td>
                    <h3>
                        Total distance</h3>
                    <div id="distance_div" style="width: 400px; height: 200px;">
                    </div>
                </td>
                <td>
                    <h3>
                        Total duration</h3>
                    <div id="duration_div" style="width: 400px; height: 200px;">
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <h3>
                        Total Elevation covered</h3>
                    <div id="elevation_div" style="width: 400px; height: 200px;">
                    </div>
                </td>
                <td>
                    <h3>
                        Mean speed</h3>
                    <div id="speed_div" style="width: 400px; height: 200px;"></div>
                </td>
            </tr>
        </table>

        <br />
        <asp:HyperLink ID="hylMyRoutes" runat="server" NavigateUrl="~/route/MyRoutes.aspx">back to my routes...</asp:HyperLink>
</asp:Content>
